<template>
  <div id="zhexian" class="Box"></div>
</template>

<script>
import * as echarts from 'echarts'
import { getDifferentCourseCount } from '@/api/score'
export default {
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            interval: 0, //X轴信息全部展示
            rotate: 10
          }
        },
        title: {
          left: 'center',
          text: '平均成绩折线图'
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#315070'],
              width: 1,
              type: 'solid'
            },
            interval: (index, value) => {
              console.log(value)
              return true
            }
          }
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 0, //初始化时，滑动条宽度开始标度
            end: 20,
            bottom: '3%',
            height: 10, // 重要参数：组件高度
            fillerColor: '#337AB7', // 颜色
            borderColor: 'transparent',
            backgroundColor: 'white', //两边未选中的滑动条区域的颜色
            showDataShadow: false, //是否显示数据阴影 默认auto
            showDetail: false //即拖拽时候是否显示详细数值信息 默认true
          },
          //下面这个属性是里面拖动配置
          {
            type: 'inside',
            xAxisIndex: 0,
            start: 0, //默认为1
            end: 20 //默认为100
          }
        ],
        // grid: {
        //   containLabel: true,
        //   show: true,
        //   left: '10%',
        //   right: '10%',
        //   bottom: '15%',
        //   top: '15%',
        //   borderColor: '#ccc',
        //   splitLine: {
        //     interval: function(index, value) {
        //       console.log(index, value)
        //       if (value === 60) {
        //         grid.splitLine.lineStyle = lineStyle
        //       }
        //       return true
        //     }
        //   }
        // },
        series: [
          {
            data: [],
            type: 'line',
            smooth: true
          }
        ]
      }
    }
  },
  mounted() {
    var myChart1 = echarts.init(document.getElementById('zhexian'))
    myChart1.setOption(this.option)
    getDifferentCourseCount().then(res => {
      const keys = []
      const values = []
      res.data.forEach(element => {
        keys.push(element.name)
        values.push(element.value)
      })
      this.option.xAxis.data = keys
      this.option.series[0].data = values
      myChart1.setOption(this.option)
    })
    window.onresize = function() {
      myChart1.resize()
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.Box {
  width: 100%;
  height: 100%;
  padding: 10px;
}
</style>